<template>
  <div>
      <div class="header">
          <h4>商品分类</h4>
          <input type="text" placeholder="搜索商品或店铺">
      </div>
      <div class="slideBox">
          <div class="slide-nav-box">
         <ul class="slide-nav">
              <li>热门推荐</li>
              <li>手机</li>
              <li>大家电</li>
              <li>生活家电</li>
              <li>电脑办公</li>
              <li>厨卫大电</li>
              <li>智能数码</li>
              <li>食品酒瘾</li>
              <li>家装建材</li>
              <li>母婴用品</li>
              <li>个护清洁</li>
              <li>美妆护肤</li>
              <li>苏宁奥莱</li>
              <li>苏宁国际</li>
             </ul>
          </div>
          
          <div class="slide-list">
              <h5>热门推荐</h5>
                  <div class="box">
                      <div>
                          <img src="http://image1.suning.cn/uimg/asbs/ad/1603334060538_imgWap_tmndir.jpg" alt="">
                          <span>手机</span>
                      </div>
                      <div>
                          <img src="http://image4.suning.cn/uimg/asbs/ad/1526974072412_app_wap_list.jpg" alt="">
                          <span>空调</span>
                      </div>
                       <div>
                          <img src="http://image.suning.cn/uimg/asbs/ad/1611715465093_imgWap_tmndir.jpg" alt="">
                          <span>笔记本</span>
                      </div>
                       <div>
                          <img src="http://image4.suning.cn/uimg/asbs/ad/1603334324109_imgWap_tmndir.jpg" alt="">
                          <span>平板电脑</span>
                      </div>
                       <div>
                          <img src="https://uimgproxy.suning.cn/uimg1/sop/commodity/u92QhdYzJcPWEjVHdmke5A.jpg" alt="">
                          <span>热水器</span>
                      </div>
                       <div>
                          <img src="http://image1.suning.cn/uimg/asbs/ad/1614176959702_imgApp_tmndir.jpg" alt="">
                          <span>烟灶套餐</span>
                      </div>
                       <div>
                          <img src="http://image1.suning.cn/uimg/asbs/ad/1491712405935_pc_list.jpg" alt="">
                          <span>电视</span>
                      </div>
                       <div>
                          <img src="http://image1.suning.cn//uimg/cms/img/158631783792995296.jpg" alt="">
                          <span>冰箱</span>
                      </div>
                       <div>
                          <img src="http://image5.suning.cn/uimg/asbs/ad/1604489915896_imgApp_tmndir.jpg" alt="">
                          <span>取暖器</span>
                      </div>
                       
                  </div>
             
          </div>
      </div>
  </div>
</template>

<script>
</script>

<style scoped>
    .header{
        width: 100vw;
        display: flex;
        align-items: center;
    }
    .header h4{
        font-size:.30rem;
    }
   .header input{
       display: inline-block;
       width: 5rem;
       height:.61rem;
       margin:.3rem;
       border-radius:.2rem;
       outline: none;
        background: #f7f7f7;
        color:#888;
        font-size:.2rem;
        border:none;
        padding-left: .5rem;
   }
   .slideBox{
       display: flex;
       /* overflow: scroll; */
   }
   .slide-nav li{
       padding:.3rem;
       text-align: center;
       margin:0 .05rem;
       font-size:.2rem;
   }
   .slide-nav-box{
        background:#f8f8f8;
       height: 90vh;
       overflow: hidden;
       overflow:scroll ;
       padding:.1rem 0;
       border-radius: 0 .2rem;
       width: 4rem;
   }
   .slide-nav li:nth-child(1){
       background:#fff;
       font-weight: bold;
   }
   h5{
       font-size:.15rem;
        font-weight: bold;
        padding:0 0 .2rem .2rem;
   }
   .box{
       display: flex;
       flex-wrap: wrap;
        justify-content: space-between;
   }
   .box div{
       display: flex;
       flex-direction: column;
       width: 1.5rem;
        margin:0 0 .5rem 0;
        align-items: center;
      
   }
   img{
       width: 1.2rem;
       height: 1.2rem;
   }
    .box div span{
        text-align: center;
        margin-top:.2rem;
        font-size:.2rem;
    }
</style>